<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件TodoList</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="inputValue" />
			<button @click="btnClick">提交</button>
			<ul>
				<!--<li v-for="item in list">{{item}}</li>-->
				<todo-item :content="item"
					       :index="index"
						   v-for="(item, index) in list"
						   @delete="handlerItemDelete">
				</todo-item>
			</ul>
		</div>
		<script>
			//全局组件
			/*Vue.component("TodoItem", {
				props : ['content'],
				template: "<li>{{content}}</li>"
			})*/
			
			//局部组件
			var TodoItem = {
				props: ['content', 'index'],
				template: "<li @click='handlerItemClick'>{{content}}</li>",
				methods: {
					handlerItemClick: function() {
						this.$emit("delete", this.index)
					}
				}
			}
			
			var app = new Vue({
				el: '#app',
				components: {
					TodoItem: TodoItem
				},
				data: {
					list: [],
					inputValue: ''
				},
				methods: {
					btnClick: function() {
						this.list.push(this.inputValue)
						this.inputValue = ''
					},
					handlerItemDelete: function(index) {
						this.list.splice(index, 1)
					}
				}
			})
		</script>
	</body>
</html>
